
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="//unpkg.com/layui@2.9.21-rc/dist/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="table-container">
  <div class="layui-btn-container">
    <form class="layui-form layui-form-pane" action="/containers/" lay-filter="searchForm" onsubmit="return false;">
      <div class="layui-form-item">
        <div class="layui-inline">
          <div class="layui-input-inline">
            <input class="layui-input" name="search" id="searchInput" autocomplete="off" placeholder="请输入搜索关键词">
          </div>
        </div>
        <div class="layui-inline">
          <div class="layui-input-inline">
            <button class="layui-btn" lay-submit lay-filter="searchForm">搜索</button>
          </div>
        </div>
        <div class="layui-inline">
          <div class="layui-input-inline">
            <button class="layui-btn" lay-on="addContainer">添加容器</button>
          </div>
        </div>
      </div>
    </form>
  </div>
  <table class="layui-hide table-layout" id="ID-table-demo-data"></table>
</div>

<!-- 工具栏模板 -->
<script type="text/html" id="operation-bar">
  <div class="layui-clear-space">
    <a class="layui-btn layui-btn-xs" lay-event="query">查询</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  </div>
</script>

<script src="//unpkg.com/layui@2.9.21-rc/dist/layui.js"></script>
<script>
layui.use(['table', 'form', 'layer'], function(){
  var table = layui.table;
  var form = layui.form;
  var layer = layui.layer;
  var util = layui.util;

  util.on('lay-on', {
    'addContainer': function(){
      layer.open({
        type: 1,
        content: `
          <div class="addContainer-box layui-form">
            <input type="text" name="containerName" placeholder="容器名称" lay-reqtext="输入容器名称" class="layui-input" lay-verify="required">
            <button type="button" class="layui-btn addContainer-btn" lay-submit lay-filter="addContainer">提交</button>
          </div>
        ` ,
        success: function(){
          form.render();
          form.on('submit(addContainer)', function(data){
            let containerName = data.field.containerName
            if(!containerName) return false
            window.location.href = `/addContainer/${containerName}`
            return false;
          })
        }
      });
    }
  })

  // 假设 resp1 是从后端传递过来的数据
  var resp1 = {{ resp1|safe }};

  // 将 resp1 数据转换为 Layui 表格所需的格式
  var data = resp1.map(function(item) {
      return {
          name: item.name,
          count: item.count,
          bytes: item.bytes,
          last_modified: item.last_modified
      };
  });

  // 已知数据渲染
  var inst = table.render({
    elem: '#ID-table-demo-data',
    cols: [[ //标题栏
      {field: 'name', title: '名称', width: 120},
      {field: 'count', title: '数量', width: 100},
      {field: 'last_modified', title: '上一次修改日期', width: 200},
      {field: 'bytes', title: '大小', width: 80, sort: true},
      {fixed: 'right', title:'操作', align:'center', toolbar: '#operation-bar'}
    ]],
    data: data,

    //skin: 'line', // 表格风格
    //even: true,
    page: true, // 是否显示分页
    limits: [5, 10, 15],
    limit: 5 // 每页默认显示的数量
  });

  // 监听工具条
  table.on('tool(ID-table-demo-data)', function(obj){
    var data = obj.data; // 获取当前行数据
    var layEvent = obj.event; // 获取 lay-event 对应的值（也可以是表头的 event 参数对应的值）

    if(layEvent === 'del'){ // 删除
      layer.confirm('真的删除行么', function(index){
        window.location.href = `/hmz/main5/${data.name}`;
        layer.close(index);
      });
    } else if(layEvent === 'query'){
      window.location.href = `/objects/${data.name}`;
    }
  });

  // 监听搜索表单提交
  form.on('submit(searchForm)', function(data){
    var searchValue = data.field.search;
    console.log('搜索关键词:', searchValue);

    // 过滤数据
    var filteredData = resp1.filter(function(item) {
      if(!searchValue) return true;
      return item.name.toLowerCase().includes(searchValue.toLowerCase());
    });

    // 更新表格数据
    table.reload('ID-table-demo-data', {
      data: filteredData,
      page: {
        curr: 1 // 重新从第 1 页开始
      }
    });
    return false; // 阻止表单默认提交
  });
})

</script>
<style>
.table-container {
    width: auto;
    height: 100%;
    margin-left: 4rem;
    margin-top: 2rem;
}
.addContainer-box{
  padding: 16px;
  width: 400px;
  display: flex;
  flex-direction: row;
}
.addContainer-btn{
  margin-left: 1rem;
}
</style>
</body>
</html>
